<template>
  <div>
      <el-form ref="form" label-width="100px">
        <el-form-item label="SPU名称">{{spu.spuName}}</el-form-item>
        <el-form-item label="SKU名称">
          <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格（元）">
          <el-input placeholder="价格（元）" type="number" v-model="skuInfo.price"></el-input>
        </el-form-item>
        <el-form-item label="重量（千克）">
          <el-input placeholder="重量（千克）" v-model="skuInfo.weight"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
          <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
          <el-form :inline="true" ref="form" label-width="80px">
            <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
              <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
                <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
          <el-form :inline="true" ref="form" label-width="80px">
            <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
              <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
                <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="图片列表">
          <el-table border :data="spuImageList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80px"></el-table-column>
            <el-table-column prop="prop" label="图片" width="width">
              <template slot-scope="{row,$index}">
                <img :src="row.imgUrl" style="width:100px;height:100px">
              </template>
            </el-table-column>
            <el-table-column prop="imgName" label="名称" width="width"></el-table-column>
            <el-table-column prop="" label="操作" width="width">
              <template slot-scope="{row,$index}">
                <el-button type="primary" v-if="row.isDefault==0" size="mini" @click="changeDefault(row)">设置默认</el-button>
                <el-button v-else size="mini">默认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    name:'SkuForm',
    data() {
      return {
        // 存储图片信息
        spuImageList:[],
        // 存储销售属性
        spuSaleAttrList:[],
        // 存储平台属性
        attrInfoList:[],
        // 收集sku数据
        skuInfo:{
          // 第一类：父组件给的数据
          "category3Id": 0,
          "spuId": 0,
          "tmId": 0,
          // 第二类：数据双向绑定收集
          "skuName": "",
          "price": 0,
          "weight": "",
          "skuDesc": "",
          // 第三类：自己书写代码收集
          // 默认图片
          "skuDefaultImg": "",
          // 图片列表 
          "skuImageList": [
            // {
            //   "imgName": "string",
            //   "imgUrl": "string",
            //   "isDefault": "string",
            //   "spuImgId": 0
            // }
          ],
          // 销售属性
          "skuSaleAttrValueList": [
            // {
            //   "saleAttrId": 0,
            //   "saleAttrValueId": 0,
            // }
          ],
          // 平台属性
          "skuAttrValueList": [
            // {
            //   "attrId": 0,
            //   "valueId": 0,
            // }
          ],
        },
        // 存储spu数据
        spu:{},
        // 收集图片数据
        imageList:[]
      }
    },
    methods:{
      // 获取skuform数据
      async getData(spu,category1Id,category2Id){
        // 收集父组件数据
        this.spu = spu;
        this.skuInfo.category3Id = spu.category3Id;
        this.skuInfo.spuId = spu.id;
        this.skuInfo.tmId = spu.tmId;
        // 获取图片数据
        let result = await this.$API.spu.reqSpuImageList(spu.id);
        if(result.code == 200){
           let list = result.data;
           list.forEach(item => {
             item.isDefault = 0;
           });
           this.spuImageList = list;
        }
        // 获取销售属性数据
        let result1 = await this.$API.spu.reqSpuSaleAttrList(spu.id);
        if(result1.code == 200){
          this.spuSaleAttrList = result1.data;
        }
        // 获取平台属性数据
        let result2 = await this.$API.spu.reqAttrInfoList(category1Id,category2Id,spu.category3Id);
        if(result2.code == 200){
          this.attrInfoList = result2.data;
        }
      },
      // table复选框按钮事件
      // 参数就是row对象数组（和最终参数缺少isDefault字段）
      handleSelectionChange(params){
        // 注意缺少isDefault字段
        this.imageList = params;
      },
      // 排他操作
      changeDefault(row){
        // 图片列表其他数据isDefult都是0，只有点击的这个是1
        this.spuImageList.forEach(item=>{
          item.isDefault = 0;
        });
        row.isDefault = 1;
        // 收集默认图片地址
        this.skuInfo.skuDefaultImg = row.imgUrl;
      },
      // 取消按钮回调
      cancel(){
        // 触发自定义事件，让父组件切换场景
        this.$emit('changeScene',0);
        // 清除数据
        Object.assign(this._data,this.$options.data());
      },
      // 保存按钮事件
      async save(){
        // 整理参数
        const {attrInfoList,spuSaleAttrList,imageList,skuInfo} = this;
        // 整理平台属性数据
        skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
          if(item.attrIdAndValueId){
            const [attrId,valueId] = item.attrIdAndValueId.split(":");
            prev.push({attrId,valueId});
          }
          return prev;
        },[]);
        // 整理销售属性数据
        skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev,item)=>{
          if(item.attrIdAndValueId){
            const [saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(":");
            prev.push({saleAttrId,saleAttrValueId});
          }
          return prev;
        },[]);
        // 整理图片列表数据
        skuInfo.skuImageList = imageList.map(item=>{
          return {
            imgName: item.imgName,
            imgUrl: item.imgUrl,
            isDefault: item.isDefault,
            spuImgId: item.id
          }
        });
        // 发请求
        let result = await this.$API.spu.reqAddSku(skuInfo);
        if(result.code==200){
          this.$emit('changeScene',0);
          this.$message.success("添加SKU成功");
        }
      }
    }
}
</script>

<style>

</style>